﻿<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>厨卫电器销售数据可视化分析</title>
    <script type="text/javascript" src="../static/js/jquery.js"></script>
    <link rel="stylesheet" href="../static/css/comon0.css">
</head>
<script>
    $(window).load(function () {
        $(".loading").fadeOut()
    })

    /****/
    $(document).ready(function () {
        let whei = $(window).width()
        $("html").css({fontSize: whei / 20})
        $(window).resize(function () {
            let whei = $(window).width()
            $("html").css({fontSize: whei / 20})
        });
    });
</script>
<script type="text/javascript" src="../static/js/echarts.min.js"></script>
<script type="text/javascript" src="../static/js/echarts-wordcloud.min.js"></script>
<body>
<div class="loading">
    <div class="loadbox"><img src="../static/picture/loading.gif"> 页面加载中...</div>
</div>
<div class="head">
    <div style="position:absolute; left:.3rem; top:0; line-height: .75rem;">
        <a href="/">首页</a>
        <a href="?path=冰箱">冰箱</a>
        <a href="?path=洗衣机">洗衣机</a>
        <a href="?path=热水器">热水器</a>
        <a href="?path=净水器">净水器</a>
        <a href="?path=洗碗机">洗碗机</a>
        <a href="?path=燃气灶">燃气灶</a>
        <a href="?path=抽油烟机">抽油烟机</a>
        <a href="?path=正面lda分析">正面lda分析</a>
        <a href="?path=负面lda分析">负面lda分析</a>
    </div>
    <script>
        const urlParams = new URLSearchParams(window.location.search);
        const path = urlParams.get('path');

        const links = document.querySelectorAll('a');

        if (path) {
            for (let i = 0; i < links.length; i++) {
                const linkPath = decodeURIComponent(links[i].href.split('=')[1]);
                if (path === linkPath) {
                    links[i].style.color = 'yellow';
                }
            }
        } else {
            links[0].style.color = 'yellow';  // 将第一个a标签（即首页链接）的字体颜色设置为黄色
        }
    </script>
    <h1><a href="#" style="color: white">厨卫商品数据可视化</a></h1>
    <div class="weather"><img src="../static/picture/weather.png"><span>多云转小雨</span><span id="showTime"></span></div>

    <script>
        let t = null;
        t = setTimeout(time, 1000);//開始运行
        function time() {
            clearTimeout(t);//清除定时器
            dt = new Date();
            let y = dt.getFullYear();
            let mt = dt.getMonth() + 1;
            let day = dt.getDate();
            let h = dt.getHours();//获取时
            let m = dt.getMinutes();//获取分
            let s = dt.getSeconds();//获取秒
            document.getElementById("showTime").innerHTML = y + "年" + mt + "月" + day + "日" + "-" + h + "时" + m + "分" + s + "秒";
            t = setTimeout(time, 1000); //设定定时器，循环运行
        }

    </script>


</div>
<div class="mainbox">
    {% block main %}
        <ul class="clearfix">
            <li>
                <div class="boxall" style="height: 3.2rem">
                    <div class="alltitle">评论情感倾向分析</div>
                    <div class="allnav" id="chart1"></div>
                    <div class="boxfoot"></div>
                </div>
                <div class="boxall" style="height: 3.2rem">
                    <div class="alltitle">词云图展示</div>
                    <div class="allnav" id="chart2"></div>
                    <div class="boxfoot"></div>
                </div>
                <div class="boxall" style="height: 3.2rem">
                    <div class="alltitle">商品价格与销量关系图</div>
                    <div class="allnav" id="chart3"></div>
                    <div class="boxfoot"></div>
                </div>
            </li>
            <li>
<!--                嵌入预测数据折线图-->
                <div class="boxall" style="height: 3.2rem">
                    <div class="alltitle">预测电子产品交易额走势</div>
                    <div class="allnav" id="anschart"></div>
                    <div class="boxfoot"></div>
                </div>
{#                <div class="bar">#}
{#<!--                    <div class="barbox">-->#}
{#<!--                        <ul class="clearfix">-->#}
{#<!--                            <li class="pulll_left counter">17980</li>-->#}
{#<!--                            <li class="pulll_left counter">{{ data['total'] }}</li>-->#}
{#<!--                        </ul>-->#}
{#<!--                    </div>-->#}
{##}
{#<!--                    <div class="barbox2">-->#}
{#<!--                        <ul class="clearfix">-->#}
{#<!--                            <li class="pulll_left">总数据量</li>-->#}
{#<!--                            <li class="pulll_left">总销售量</li>-->#}
{#<!--                        </ul>-->#}
{#<!--                    </div>-->#}
{#                    <div id="anschart">#}
{#                    </div>#}
{#                </div>#}


                <div class="map">
<!--                    <div class="map1"><img src="../static/picture/lbx.png"></div>-->
<!--                    <div class="map2"><img src="../static/picture/jt.png"></div>-->
<!--                    <div class="map3"><img src="../static/picture/map.png"></div>-->
                    <div class="map4" id="map_1"></div>
                </div>

            </li>
            <li>
                <div class="boxall" style="height:3.4rem">
                    <div class="alltitle">商品价格区间分布</div>
                    <div class="allnav" id="chart4"></div>
                    <div class="boxfoot"></div>
                </div>
                <div class="boxall" style="height: 3.2rem">
                    <div class="alltitle">商品销量分布情况</div>
                    <div class="allnav" id="chart5"></div>
                    <div class="boxfoot"></div>
                </div>
                <div class="boxall" style="height: 3rem">
                    <div class="alltitle">销售额top10店铺</div>
                    <div class="allnav" id="chart6"></div>
                    <div class="boxfoot"></div>
                </div>
            </li>
            <script>
                $(function () {
                    f1();
                    f2();
                    f3();
                    map();
                    f4();
                    f5();
                    f6();
                    ansChart();

                    function f1() {
                        // 基于准备好的 dom，初始化 echarts 实例
                        let myChart = echarts.init(document.getElementById('chart1'));

                        // 指定图表的配置项和数据
                        let option = {
                            legend: {
                                orient: 'vertical',
                                left: 'left',
                                data: ['积极', '消极', '中性'],
                                textStyle: {
                                    color: 'rgba(255,255,255,.5)',
                                    fontSize: '12',
                                },
                            },
                            grid: {
                                left: '0%',
                                top: '10px',
                                right: '0%',
                                bottom: '4%',
                                containLabel: true
                            },
                            tooltip: {
                                trigger: 'item',
                                formatter: '{a} <br/>{b}: {c} ({d}%)'
                            },
                            color: ['#0b8ee7', '#c23531', '#b91ce3',],
                            series: [{
                                name: '情感占比',
                                type: 'pie',
                                radius: '60%',
                                data: [
                                    {value: {{ data['积极'] }}, name: '积极'},
                                    {value: {{ data['消极'] }}, name: '消极'},
                                    {value: {{ data['中性'] }}, name: '中性'}
                                ],
                                emphasis: {
                                    itemStyle: {
                                        shadowBlur: 10,
                                        shadowOffsetX: 0,
                                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                                    }
                                },
                                label: {
                                    show: true,
                                    textStyle: {
                                        fontSize: 12,
                                        color: 'auto' // 设置为auto，将自动使用饼图颜色
                                    }
                                }
                            }]
                        };
                        // 使用刚指定的配置项和数据显示图表。
                        myChart.setOption(option);
                        window.addEventListener("resize", function () {
                            myChart.resize();
                        });
                    };

                    function f2() {
                        // 基于准备好的 dom，初始化 echarts 实例
                        let myChart = echarts.init(document.getElementById('chart2'));
                        option = {
                            legend: {
                                orient: 'vertical',
                                left: 'right',
                                data: ['家用', '智能', '节能'],
                                textStyle: {
                                    color: 'rgba(255,255,255,.5)',
                                    fontSize: '12',
                                },
                            },
                            grid: {
                                left: 'left',
                                top: '10px',
                                right: '0%',
                                bottom: '10%',
                                containLabel: true
                            },
                            tooltip: {
                                show: true,
                                formatter: function (params) {
                                    return params.data.name + ': ' + params.data.value + '个';
                                }
                            },
                            series: [{
                                type: 'wordCloud',
                                shape: 'circle',
                                width: '90%',
                                height: '80%',
                                gridSize: 2,
                                sizeRange: [12, 50],
                                rotationRange: [-90, 90],
                                textStyle: {
                                    color: function () {
                                        return 'rgb(' + [
                                            Math.round(Math.random() * 200),
                                            Math.round(Math.random() * 160),
                                            Math.round(Math.random() * 223)
                                        ].join(',') + ')';
                                    }
                                },
                                data: {{ data['words_data']|safe }}
                            }],
                        };
                        // 使用刚指定的配置项和数据显示图表。
                        myChart.setOption(option);

                        window.addEventListener("resize", function () {
                            myChart.resize();
                        });

                    };

                    function f3() {
                        let myChart = echarts.init(document.getElementById('chart3'));
                        let chart_data = {{ data['sal_pri_data']|safe }};
                        console.log(chart_data);
                        let option = {
                            grid: {
                                left: 'left',
                                top: '10px',
                                right: '0%',
                                bottom: '0',
                                containLabel: true
                            },
                            tooltip: {
                                trigger: 'axis'
                            },
                            legend: {
                                top: '0%',
                                data: chart_data.map(function (d) {
                                    return d.name
                                }),
                                textStyle: {
                                    color: 'rgba(255,255,255,.5)',
                                    fontSize: '12',
                                },
                            },
                            xAxis: {
                                type: 'value',
                                name: '价格',
                                boundaryGap: false,
                                splitLine: {
                                    show: false
                                },
                                axisLine: {
                                    lineStyle: {
                                        color: 'rgba(255,255,255,.2)'
                                    }
                                },
                            },
                            yAxis: {
                                type: 'value',
                                axisLabel: {
                                    formatter: function () {
                                        return ''; // 将y轴标签内容设置为空字符串
                                    }
                                },
                                axisTick: {
                                    show: false,
                                },
                                axisLine: {
                                    show: true,
                                    lineStyle: {
                                        color: "rgba(255,255,255,.1	)",
                                        width: 1,
                                        type: "solid"
                                    },
                                },
                                splitLine: {
                                    lineStyle: {
                                        color: "rgba(255,255,255,.1)",
                                    }
                                }
                            },
                            series: chart_data.map(function (d) {
                                return {
                                    name: d.name,
                                    type: 'line',
                                    data: d.data,
                                    symbol: 'circle',
                                }
                            })
                        };
                        myChart.setOption(option);
                        window.addEventListener("resize", function () {
                            myChart.resize();
                        });
                    }

                    function ansChart() {
                        console.log("123")
                        let fetchedData = {{ data['price']|safe }};
                        let data = [{name:'交易额',data:[]}];
                        for(let i = 0 ; i < fetchedData.length; i ++){
                            data[0]['data'].push([i, fetchedData[i]]);
                        }
                        console.log(data);
                        let myChart = echarts.init(document.getElementById('anschart'));
                        let chart_data = data;
                        let option = {
                            grid: {
                                left: 'left',
                                top: '10px',
                                right: '10px',
                                bottom: '0',
                                containLabel: true
                            },
                            tooltip: {
                                trigger: 'axis'
                            },
                            legend: {
                                top: '0%',
                                data: chart_data.map(function (d) {
                                    return d.name
                                }),
                                textStyle: {
                                    color: 'rgba(255,255,255,.5)',
                                    fontSize: '12',
                                },
                            },
                            xAxis: {
                                type: 'value',
                                name: '',
                                boundaryGap: false,
                                splitLine: {
                                    show: false
                                },
                                axisLine: {
                                    lineStyle: {
                                        color: 'rgba(255,255,255,.2)'
                                    }
                                },
                                axisLabel: {
                                    textStyle: {
                                        color: 'rgba(255,255,255,.5)',
                                    },
                                },
                            },
                            yAxis: {
                                type: 'value',
                                axisLabel: {
                                    textStyle: {
                                        color: 'rgba(255,255,255,.5)',
                                    },
                                },
                                axisTick: {
                                    show: true,
                                },
                                axisLine: {
                                    show: true,
                                    lineStyle: {
                                        color: "rgba(255,255,255,.1	)",
                                        width: 1,
                                        type: "solid"
                                    },
                                },
                                splitLine: {
                                    lineStyle: {
                                        color: "rgba(255,255,255,.1)",
                                    }
                                }
                            },
                            series: chart_data.map(function (d) {
                                return {
                                    name: d.name,
                                    type: 'line',
                                    data: d.data,
                                    symbol: 'circle',
                                    lineStyle: {
                                        color: '#99ddff'
                                    },
                                    dotStyle: {
                                        color: '#99ddff'
                                    },
                                    //显示出来折线图的面积
                                    areaStyle: {
                                        normal: {
                                            // 颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
                                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                                offset: 0,
                                                color: 'rgba(80,141,255,0.39)'
                                            }, {
                                                offset: 0.34,
                                                color: 'rgba(56,155,255,0.25)'
                                            }, {
                                                offset: 1,
                                                color: 'rgba(38,197,254,0.00)'
                                            }])
                                        }
                                    }
                                }
                            })
                        };
                        myChart.setOption(option);
                        window.addEventListener("resize", function () {
                            myChart.resize();
                        });
                    }

                    function map() {
                        // 基于准备好的dom，初始化echarts实例
                        let myChart = echarts.init(document.getElementById('map_1'));
                        let data = {{ data['map_data']|safe }};
                        console.log(data)
                        // 填充缺失数据
                        for (let i = 0; i < data.length; i++) {
                            if (isNaN(data[i].value)) {
                                data[i].value = 0;
                                data[i].itemStyle = { // 将缺失数据的颜色设置为图例中"无销量"的颜色
                                    normal: {
                                        color: '#7ddfff'
                                    }
                                };
                            }
                        }
                        option = {
                            tooltip: {
                                trigger: 'item',
                                formatter: function (params) {
                                    let value = isNaN(params.value) ? 0 : params.value;
                                    return params.name + '销量: <br>' + value + '件';
                                }
                            },
                            series: [{
                                name: '热力图',
                                type: 'map',
                                mapType: 'china',
                                data: data,
                                label: {
                                    show: true
                                },
                                emphasis: {
                                    label: {
                                        show: true
                                    }
                                },
                            }],
                            visualMap: {
                                type: 'piecewise',
                                pieces: [
                                    {min: 50000, max: 1000000000, label: '50000件以上', color: '#0066CC'},
                                    {min: 10000, max: 50000, label: '10000-50000件', color: '#0099FF'},
                                    {min: 5000, max: 10000, label: '5000-10000件', color: '#33B5E5'},
                                    {min: 2000, max: 5000, label: '2000-5000件', color: '#66CCEE'},
                                    {min: 0, max: 2000, label: '0-2000件', color: '#99DDFF'},
                                    {value: 'NaN', label: '无销量', color: '#a7ffe6'}
                                ],
                                orient: 'vertical',
                                left: '30%',
                                bottom: 10,
                                itemWidth: 10,
                                itemHeight: 10,
                                itemGap: 5,  // 每行的间隔
                                textStyle: {
                                    fontSize: 10,
                                    color: '#aed0fc'
                                },
                            },
                        };
                        myChart.setOption(option);
                        window.addEventListener("resize", function () {
                            myChart.resize();
                        });
                    };

                    function f4() {
                        let data = {{ data['data_price_interval']|safe }};
                        let chart = echarts.init(document.getElementById('chart4'));
                        let options = {
                            tooltip: {
                                trigger: 'item',
                                formatter: '{a} <br/>{b}: {c} ({d}%)'
                            },
                            color: ['#c23531', '#0b8ee7', '#b91ce3', '#d48265', '#91c7ae', '#ed47a8', '#ca8622', '#bda29a', '#83e353'],
                            series: [
                                {
                                    name: '区间',
                                    type: 'pie',
                                    radius: '60%',
                                    data: data,
                                    emphasis: {
                                        itemStyle: {
                                            shadowBlur: 10,
                                            shadowOffsetX: 0,
                                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                                        }
                                    },
                                    // 饼图指示文字样式
                                    label: {
                                        show: true,
                                        textStyle: {
                                            fontSize: 12,
                                            color: 'auto' // 设置为auto，将自动使用饼图颜色
                                        }
                                    }
                                },

                            ]
                        };
                        chart.setOption(options);
                        window.addEventListener("resize", function () {
                            chart.resize();
                        });
                    };

                    function f5() {
                        let data =
                        {{ data['sales_data']|safe }}
                        let chartDom = document.getElementById('chart5');
                        let myChart = echarts.init(chartDom);

                        let option = {
                            legend: {
                                orient: 'vertical',
                                left: 'left',
                                top: '30%',
                                data: {{ data['sales_key']|safe }},
                                textStyle: {
                                    color: 'rgba(255,255,255,.5)',
                                    fontSize: '12',
                                },
                            },
                            tooltip: {
                                trigger: 'item',
                                formatter: "{a} <br/>{b} : {c}"
                            },
                            color: ['#ff0900', '#0097ff', '#56f561', '#ff4000', '#91c7ae', '#ed47a8', '#9936f0'],
                            series: [
                                {
                                    name: '商品',
                                    type: 'funnel',
                                    left: 'right',
                                    top: '10',
                                    bottom: '0',
                                    width: '90%',
                                    height: '90%',
                                    label: {
                                        formatter: '{b}',
                                        textStyle: {
                                            fontSize: 12,
                                            color: 'auto'
                                        },
                                        textBorderColor: 'transparent'
                                    },
                                    labelLine: {
                                        show: false
                                    },
                                    itemStyle: {
                                        opacity: 0.7
                                    },
                                    emphasis: {
                                        label: {
                                            fontSize: 20
                                        }
                                    },
                                    data: data
                                }
                            ]
                        };

                        option && myChart.setOption(option);
                        window.addEventListener("resize", function () {
                            myChart.resize();
                        });
                    };

                    function f6() {
                        // 基于准备好的dom，初始化echarts实例
                        let myChart = echarts.init(document.getElementById('chart6'));

                        // 指定图表的配置项和数据
                        let option = {
                            tooltip: {
                                trigger: 'axis',
                                axisPointer: {type: 'shadow'}
                            },
                            grid: {
                                left: '0%',
                                top: '0',
                                right: '10px',
                                bottom: '0',
                                containLabel: true,
                            },
                            xAxis: {
                                type: 'category',
                                data: {{ data['shop_key']|safe }},
                                show: true,
                                axisLine: {
                                    show: true,
                                    lineStyle: {
                                        color: "rgba(255,255,255,.1)",
                                        width: 1,
                                        type: "solid"
                                    },
                                },

                                axisTick: {
                                    show: false,
                                },
                                axisLabel: {
                                    interval: 0,
                                    rotate: 15,
                                    show: true,
                                    splitNumber: 15,
                                    textStyle: {
                                        color: "rgba(255,255,255,.6)",
                                        fontSize: '12',
                                    },
                                },
                            },
                            yAxis: {
                                type: 'value',
                                axisLabel: {
                                    formatter: function () {
                                        return ''; // 将y轴标签内容设置为空字符串
                                    },
                                    textStyle: {
                                        color: "rgba(255,255,255,.6)",
                                        fontSize: '12',
                                    }
                                },
                                axisTick: {
                                    show: false,
                                },
                                axisLine: {
                                    show: true,
                                    lineStyle: {
                                        color: "rgba(255,255,255,.1	)",
                                        width: 1,
                                        type: "solid"
                                    },
                                },
                                splitLine: {
                                    lineStyle: {
                                        color: "rgba(255,255,255,.1)",
                                    }
                                }
                            },
                            series: [{
                                name: '销量',
                                type: 'bar',
                                itemStyle: {
                                    normal: {
                                        color: '#27d08a',
                                        opacity: 1,
                                        barBorderRadius: 5,
                                    }
                                },
                                data: {{ data['shop_data']|safe }},
                            }],
                        };

                        // 使用刚指定的配置项和数据显示图表。
                        myChart.setOption(option);
                        window.addEventListener("resize", function () {
                            myChart.resize();
                        });
                    }
                })
            </script>
        </ul>
    {% endblock %}
</div>
<div class="back"></div>

<script type="text/javascript" src="../static/js/china.js"></script>
</body>
</html>
